<template>
  <div class="home-view">
    <p>泥嚎，嘎嘎</p>
    <p>缓存的目录：{{ cachePath }}</p>

    <el-button @click="changeCacheDirectory">更改缓存目录</el-button>
    <el-button @click="clearCache">清除缓存</el-button>
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';

const cachePath = ref('');

/*打开更改缓存目录的弹框*/
async function changeCacheDirectory() {
  const path = await window.preloadApi.changeCacheDirectory();
  ElMessage({
    message: '已更改缓存目录',
    type: 'success',
  });
  cachePath.value = path;
}

/*清除缓存*/
async function clearCache() {
  await ElMessageBox.confirm('确定删除吗？', '操作提示', {
    type: 'warning',
  });
  window.preloadApi.clearCache();
  ElMessage.success('删除成功');
}

/*获取缓存的目录地址*/
function getCachePath() {
  window.preloadApi.getCachePath((event, value) => {
    cachePath.value = value;
  });
}

onMounted(() => {
  getCachePath();
});
</script>

<style scoped lang="less">
.home-view {
  padding: 14px;
  p {
    margin-bottom: 10px;
  }
}
</style>
